<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>
        <label for="">姓名：</label>
        <input type="text" class="username">
        <span class="user_span">用户名由数字字母组成的4-8位，数字不能开头</span>
    </div>
    <div>
        <label for="">手机号：</label>
        <input type="text" class="userPhone">
        <span class="phone_span">11位的手机号</span>
    </div>
    <div>
        <label for="">密码：</label>
        <input type="text" class="password">
        <span class="pass_span">密码由数字字母组成的6位</span>
    </div>
    <div>
        <label for="">验证码：</label>
        <input type="text" class="code">
        <span class="showCode">1d2s</span>
        <span class="code_span">验证码不分大小写</span>
    </div>

    <div>
        <button class="reg">注册</button>
    </div>

    <script>

        // 数组的运用： 
        //    判断是否合法的时候，把所有合法的内容存入数组，判断是否存在 ， 只要不存在就是不合法的
        //    星期转大写   0 - 星期天    1 - 星期一      2 - 星期二       []
        //    全局变量的使用   一个变量需要在不同的函数中使用 --- 作用域


        //    判断是不是数字？
        //        !isNaN()
        //        遍历      [0,1,2,3,4,5,6,7,8,9]  inlcudes



        var oUser = get('.username');   // 自己封装的函数get ........
        var oReg = get('.reg');
        var oUserSpan = get('.user_span');


        var oPwd = get('.password');
        var oPwdSpan = get('.pass_span');

        var oShowCode = get('.showCode');
        var oCodeSpan = get('.code_span');
        var oCodeInp = get('.code');



        var numArr = [];
        for (var i = 0; i <= 9; i++) {
            numArr.push(i + '');
        }


        var smallArr = [];
        for (var i = 97; i <= 122; i++) {
            smallArr.push(String.fromCharCode(i));
        }


        var bigArr = [];
        for (var i = 65; i <= 90; i++) {
            bigArr.push(String.fromCharCode(i));
        }

        var allArr = numArr.concat(smallArr, bigArr);
        console.log(allArr);



        //页面(一打开就有随机验证码
        oShowCode.innerHTML = randCode(5);





        // 绑定事件
        oReg.onclick = function () {
            // 用户名的验证    为空  长度不对  数字开头   非法   
            var username = oUser.value.trim();   // 去掉首尾空格
            // 为空     判断长度   username.length === 0
            if (username === '') {
                oUserSpan.innerHTML = '用户名不能为空';
                oUserSpan.style.color = 'red';
                return;
            }

            // 长度不对   
            if (username.length > 8 || username.length < 4) {
                oUserSpan.innerHTML = '长度必须是4-8位';
                oUserSpan.style.color = 'red';
                return;
            }

            // 数字开头   --- 第一位是数字   
            //   username[0] >= 0 && username[0] <= 9
            if (numArr.includes(username[0])) {   // !isNaN()     0-9之间
                oUserSpan.innerHTML = '用户名不能数字开头';
                oUserSpan.style.color = 'red';
                return;
            }

            // 判断非法   数字和字母 
            for (var i = 0; i < username.length; i++) {
                if (!allArr.includes(username[i])) {
                    oUserSpan.innerHTML = '用户名不合法';
                    oUserSpan.style.color = 'red';
                    return;
                }
            }

            oUserSpan.innerHTML = '√';
            oUserSpan.style.color = 'green';



            // 密码判断：
            //    强弱的判断    
            //      如果都是数字或者都是小写或者都是大写 弱
            //      任意两个组合  中
            //      三种组合   安全

            // 获取密码
            var password = oPwd.value.trim();
            // 其他验证 .....

            // 强弱验证
            //    数字，小写，大写      立3个flag
            var f1 = 0, f2 = 0, f3 = 0;

            // 判断有没有数字
            // for (var i in password) {
            //     if (numArr.includes(password[i])) {
            //         // f1 = 1;
            //         f1++;
            //         break;
            //     }
            // }


            // // 判断小写
            // for (var i in password) {
            //     if (smallArr.includes(password[i])) {
            //         f2 = 1;
            //         break;
            //     }
            // }

            // // 判断大写
            // for (var i in password) {
            //     if (bigArr.includes(password[i])) {
            //         f3 = 1;
            //         break;
            //     }
            // }


            // for (var i in password) {     // 12acB3
            //     if (numArr.includes(password[i])) {
            //         f1 = 1;
            //     }
            //     else if (smallArr.includes(password[i])) {
            //         f2 = 1;
            //     }
            //     else if (bigArr.includes(password[i])) {
            //         f3 = 1;
            //     }
            // }


            for (var i in password) {     // 12acB3
                if (numArr.includes(password[i])) {
                    f1 = 1;
                    continue;
                }
                if (smallArr.includes(password[i])) {
                    f2 = 1;
                    continue;
                }
                if (bigArr.includes(password[i])) {
                    f3 = 1;
                }
            }


            // 1个true2个false   弱
            // 2个true1个false  中
            // 3个true          强

            var f = f1 + f2 + f3;
            if (f === 1) {
                // 弱
            }
            else if (f === 2) {
                // 中
            }
            else if (f === 3) {
                // 强
            }




            // 验证码的验证
            if (oCodeInp.value.toLowerCase() === oShowCode.innerHTML.toLowerCase()) {
                // alert('ok')
                oCodeSpan.innerHTML = 'ok';
                oCodeSpan.style.color = 'green';
                location.href = 'http://www.baidu.com';
            }
            else {
                // alert('err')
                oCodeSpan.innerHTML = 'err';
                oCodeSpan.style.color = 'red';
                // 输入清空
                oCodeInp.value = '';
                // 刷新验证码
                oShowCode.innerHTML = randCode(5);
            }
        }



        function get(el) {
            return document.querySelector(el);
        }


        function randCode(n) {
            var res = '';
            for (var i = 0; i < n; i++) {
                res += allArr[Math.floor(Math.random() * allArr.length)];
            }


            var f1 = f2 = f3 = 0;
            for (var i in res) {
                if (numArr.includes(res[i])) {
                    f1 = 1;
                    continue;
                }
                if (smallArr.includes(res[i])) {
                    f2 = 1;
                    continue;
                }
                if (bigArr.includes(res[i])) {
                    f3 = 1;
                }
            }

            var f = f1 + f2 + f3;

            // console.log(res);

            if (f === 3) {
                return res
            }

            // 如果不满足条件就重新生成验证码  --- 调用函数自己
            return randCode(n)
        }




    </script>



</body>

</html>